<template>
  <!-- 展示上传的图片 -->
  <a-row v-if="image1 || image2" style="margin-top: 20px;">
    <a-col :span="12">
      <img v-if="image1" :src="image1" alt="Left Image" style="width: 300px;"/>
    </a-col>
    <a-col :span="12">
      <img v-if="image2" :src="image2" alt="Right Image" style="width: 300px;"/>
    </a-col>
  </a-row>


  <a-row>
    <!-- 左侧上传图片 -->
    <a-col :span="12" style="display: flex;justify-content: center">
      <a-upload
          :show-upload-list="false"
          :before-upload="beforeUpload1"
          ref="upload1"
      >
        <a-button>
          <a-icon type="upload"/>
          上传左侧图片
        </a-button>
      </a-upload>
    </a-col>
    <!-- 右侧上传图片 -->
    <a-col :span="12">
      <a-upload
          :show-upload-list="false"
          :before-upload="beforeUpload2"
          ref="upload2"
      >
        <a-button>
          <a-icon type="upload"/>
          上传右侧图片
        </a-button>
      </a-upload>
    </a-col>
  </a-row>


  <!-- 校验结果显示 -->
  <a-row v-if="score !== null" style="margin-top: 20px;">
    <a-col :span="24" style="text-align: center;">
      <a-tag :color="score >= 0.78 ? 'green' : 'red'" style="font-size: 20px;">
        相似度：{{ score }} - {{ score >= 0.78 ? '同一个人' : '不是同一个人' }}
      </a-tag>
    </a-col>
  </a-row>

  <!-- 校验按钮 -->
  <a-row style="margin-top: 20px; text-align: center;display: flex;justify-content: center">
    <a-button type="primary" @click="compareFaces">
      校验人脸
    </a-button>
  </a-row>
</template>

<script>
import {ref} from 'vue';
import {Upload, Button, Tag, Row, Col, message} from 'ant-design-vue';
import _axios, {dataUrl} from "@/http/request";

export default {
  name: 'FaceComparison',
  components: {
    'a-upload': Upload,
    'a-button': Button,
    'a-tag': Tag,
    'a-row': Row,
    'a-col': Col,
  },
  setup() {
    const image1 = ref(null);
    const image2 = ref(null);
    const resData = ref({});
    const score = ref(null);

    const file1 = ref(null);
    const file2 = ref(null);

    const beforeUpload1 = (file) => {
      file1.value = file;
      image1.value = URL.createObjectURL(file);
      return false; // 阻止自动上传
    };

    const beforeUpload2 = (file) => {
      file2.value = file;
      image2.value = URL.createObjectURL(file);
      return false; // 阻止自动上传
    };

    const compareFaces = async () => {
      if (!file1.value || !file2.value) {
        return alert('请上传两张图片');
      }

      const formData = new FormData();
      formData.append('face1', file1.value);
      formData.append('face2', file2.value);

      try {
        _axios.post(dataUrl + "/fact-info/compareFaceInfo ", formData, {
          headers: {'Content-Type': 'multipart/form-data'},
        }).then((res) => {
          console.log(res)
          resData.value = res.data
          score.value = res.data.faceSimilar.score

        })
      } catch (error) {
        console.error(error);
        message.error("人脸数据获取异常，请稍后重试")
      }
    };

    return {
      image1,
      image2,
      score,
      beforeUpload1,
      beforeUpload2,
      compareFaces,
    };
  },
};
</script>

<style scoped>
/* 可以根据需要调整样式 */
</style>
